<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
	<head>
		<title>JavaScript Object-Oriented Inherited Lab3</title>
		<style type="text/css">
			div#header {
				color: #0066FF;
				font-size: 25pt;
			}
			
			div#content {
				color: #B088FF;
				font-size: 12pt;
			}
		</style>
		
		<!-- embed jquery by google，藉由google嵌入jquery 1.4.4 -->
		<script type="text/javascript" src="http://www.google.com/jsapi"></script>
		<script type="text/javascript" language="javascript">
			google.load( "jquery", "1.4.4" );
		</script>
		<script type="text/javascript">
			$( document ).ready( function() {
				
				// 宣告Animal函式實體
				var Animal = function() {
					this.eat = function() {
						alert( "animal can eat!" );
						
						if( $( "#test" ).get(0) != null ) {
							$( "#test" ).html( "dog can eat..." );
						}
					};
					
					this.move = function() {
						alert( "animal can move!" );
					};
				};
				
				// 宣告Dog函式實體
				var Dog = function() {
					this.playBall = function() {
						alert( "dog loves play ball!" );
					};
					
					// override
					this.move = function() {
						alert( "dog can move pretty fast... " );
					};
					
				};
				
				// 宣告Dog的原型為Animal
				Dog.prototype = new Animal();
				
				var lucky = new Dog();
				
				$( "#content" ).html( "<span id='test'></div>" );
				
				lucky.eat();
				lucky.move();
				lucky.playBall();
				
				var Employee = function( name, age ) {
					this.name = name;
					this.age = age;
					this.companyName = "Systemweb";
					this.boo = function() {
						alert( "BOO BOO" );
					};
					
					this.work = function() {
						alert( "Working now... " );
					};
				};
				
				var Programer = function( language ) {
					this.work = function() {
						alert( "I know " + language );
					};
				};
				Programer.prototype = new Employee( "Peter", "36" );
				Programer.prototype.talk = function() {
					alert( 
						"My name is " + this.name + ". I'm " + this.age + ". I work in " + this.companyName + "."
					);
				};
				
				var peter = new Programer( "C#" );
				peter.talk();
				peter.work();
				peter.boo();
				alert( 
					"name is " + peter.name + "\n" +
					"age is " + peter.age + "\n" + 
					"companyName is " + peter.companyName
				);
				
			});
		</script>
		
	</head>
	
	<body>
		<div title="temp1" id="header">Hello HTML</div>
		<div title="temp1" id="content">Here is content</div>
	</body>
</html>